<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>首页--layui后台管理模板</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/layui/css/layui.css"/>
	<link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
	<link rel="stylesheet" href="/css/main.css" media="all" />
	<script src="/plugns/echarts.min.js"></script>
	<script src="/js/jquery-3.2.1.min.js" ></script>
</head>
<body class="childrenBody">
<input type="hidden" th:value="${user.realName}" id="name">
<blockquote class="layui-elem-quote layui-bg-green">
	<div id="nowTime"></div>
</blockquote>
<div class="panel_box row" >
	<div class="panel col" th:each="items:${userMenu}">
		<a href="javascript:" th:data-url="${items.href}">
			<div class="panel_icon" th:style="(${items.bgColor!=''})?'background-color:'+${items.bgColor}:'background-color:'+'#54ade8'">
		<i class="layui-icon" th:data-icon='${items.icon}' th:text="${items.icon}"></i>
	</div>
	<div class="panel_word newMessage">
		<span th:text="${items.dataCount}"></span>
		<cite th:text="${items.name}"></cite>
	</div>
	</a>
</div>
</div>
<blockquote class="layui-elem-quote title">分类数量</blockquote>
<div id="main" style="width: 650px;height:400px;"></div>
	<div class="row">
		<div class="sysNotice col">
			<blockquote class="layui-elem-quote title">系统基本参数</blockquote>
			<table class="layui-table">
				<colgroup>
					<col width="150">
					<col>
				</colgroup>
				<tbody>
					<tr>
						<td>当前版本</td>
						<td class="version" th:text="${site.version}"></td>
					</tr>
					<tr>
						<td>开发作者</td>
						<td class="author"th:text="${site.author}"></td>
					</tr>
					<tr>
						<td>网站首页</td>
						<td class="homePage"th:text="${site.url}"></td>
					</tr>
					<tr>
						<td>服务器环境</td>
						<td class="server" th:text="${site.server}"></td>
					</tr>
					<tr>
						<td>数据库版本</td>
						<td class="dataBase" th:text="${site.database}"></td>
					</tr>
					<tr>
						<td>最大上传限制</td>
						<td class="maxUpload" th:text="${site.maxUpload}"></td>
					</tr>
					<tr>
						<td>当前用户权限</td>
						<td class="userRights" >
							<span class="layui-badge layui-bg-green" th:text="${roleNames}"></span>
						</td>
					</tr>
				</tbody>
			</table>
			<blockquote class="layui-elem-quote title">最新文章<i class="iconfont icon-new1"></i></blockquote>
			<table class="layui-table" lay-skin="line">
				<colgroup>
					<col>
					<col width="110">
				</colgroup>
				<tbody class="hot_news"></tbody>
			</table> 
		</div>
	</div>

	<script type="text/javascript" src="/layui/layui.js"></script>
	<script type="text/javascript" src="/js/login/main.js"></script>
</body>
</html>
<script type="text/javascript">
	$(document).ready(function(){
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		//数据加载完之前先显示一段简单的loading动画
		myChart.showLoading();
		var names=[];    //横坐标数组（实际用来盛放X轴坐标值）
		var values=[];    //纵坐标数组（实际用来盛放Y坐标值）
		$.ajax({
			type : "post",
			async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
			url : "/back/blog/article/findCountBySort",    //请求发送到dataActiont处
			data : {},
			dataType : "json",        //返回数据形式为json
			success : function(result) {
				//请求成功时执行该函数内容，result即为服务器返回的json对象
				if (result) {
					var data=result.data;
					for(var i=0;i<data.length;i++){
						names.push(data[i].name);
						values.push(data[i].count);
					}
					myChart.hideLoading();    //隐藏加载动画
					myChart.setOption({        //加载数据图表
						tooltip: {},
						legend: {
							data:['各分类数量']
						},
						xAxis: {
							data: names
						},
						yAxis: {},
						series: [{
							// 根据名字对应到相应的系列
							name: '数量',//薪资 series not exists. Legend data should be same with series name or data name.
							type: 'bar',
							data: values
						}]
					});
				}
			},
			error : function(errorMsg) {
				//请求失败时执行该函数
				alert("图表请求数据失败!");
				myChart.hideLoading();
			}
		});//end ajax
	});

</script>